<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Pokemon Cards Holo effect v2</title>
		<link rel="canonical" href="https://poke-holo.simey.me">
		<link rel="icon" href="favicon.png">
		<meta name="thumbnail" content="thumb.png">
		<meta property="og:url" content="https://poke-holo.simey.me">
		<meta property="og:type" content="website">
		<meta property="og:title" content="Pokémon Cards CSS Holographic Effect">
		<meta property="og:description" content="An exploration of what's possible with CSS for Pokemon Cards, simeydotme (Simon Goellner)">
		<meta property="og:image" content="https://poke-holo.simey.me/thumb.png">
		<meta name="twitter:title" content="Pokémon Cards CSS Holographic Effect">
		<meta name="twitter:description" content="An exploration of what's possible with CSS for Pokemon Cards, simeydotme (Simon Goellner)">
		<meta name="twitter:image" content="https://poke-holo.simey.me/thumb.png">
		<meta name="twitter:card" content="summary_large_image">
		<meta name="twitter:site" content="@simeydotme">
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,700;1,300;1,700&amp;family=Roboto:ital,wght@0,300;0,700;1,300;1,700&amp;display=swap">
		<link rel="stylesheet" href="css/global.css">
		<link rel="stylesheet" href="css/cards/base.css">
		<link rel="stylesheet" href="css/cards.css">
		<link rel="stylesheet" href="css/cards/basic.css">
		<link rel="stylesheet" href="css/cards/reverse-holo.css">
		<link rel="stylesheet" href="css/cards/regular-holo.css">
		<link rel="stylesheet" href="css/cards/cosmos-holo.css">
		<link rel="stylesheet" href="css/cards/amazing-rare.css">
		<link rel="stylesheet" href="css/cards/radiant-holo.css">
		<link rel="stylesheet" href="css/cards/v-regular.css">
		<link rel="stylesheet" href="css/cards/v-full-art.css">
		<link rel="stylesheet" href="css/cards/v-max.css">
		<link rel="stylesheet" href="css/cards/v-star.css">
		<link rel="stylesheet" href="css/cards/trainer-full-art.css">
		<link rel="stylesheet" href="css/cards/rainbow-holo.css">
		<link rel="stylesheet" href="css/cards/rainbow-alt.css">
		<link rel="stylesheet" href="css/cards/secret-rare.css">
		<link rel="stylesheet" href="css/cards/trainer-gallery-holo.css">
		<link rel="stylesheet" href="css/cards/trainer-gallery-v-regular.css">
		<link rel="stylesheet" href="css/cards/trainer-gallery-v-max.css">
		<link rel="stylesheet" href="css/cards/trainer-gallery-secret-rare.css">
		<link rel="stylesheet" href="css/cards/shiny-rare.css">
		<link rel="stylesheet" href="css/cards/shiny-v.css">
		<link rel="stylesheet" href="css/cards/shiny-vmax.css">
		<link rel="stylesheet" href="css/cards/swsh-pikachu.css">
		<script type="module" crossorigin="" src="/assets/index.fb9e8016.js"></script>
		<link rel="stylesheet" href="/assets/index.4fe8ff15.css">
		<link rel="stylesheet" href="pokemonCardV2.css"/>
	</head>
	<body>
		<svg viewBox="0 0 330 330">
		    <g>
		        <path d="M304.394,139.394l-139.39,139.393L25.607,139.393c-5.857-5.857-15.355-5.858-21.213,0.001   c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393s7.794-1.581,10.606-4.394l149.996-150   c5.858-5.858,5.858-15.355,0-21.213C319.749,133.536,310.251,133.535,304.394,139.394z" />
		        <path d="M154.398,190.607c2.813,2.813,6.628,4.393,10.606,4.393s7.794-1.581,10.606-4.394l149.996-150   c5.858-5.858,5.858-15.355,0-21.213c-5.857-5.858-15.355-5.858-21.213,0l-139.39,139.393L25.607,19.393   c-5.857-5.858-15.355-5.858-21.213,0c-5.858,5.858-5.858,15.355,0,21.213L154.398,190.607z" />
		    </g>
		</svg>
		<p class="scroll">Scroll 4 moar!</p>
		
		<!-- 
		yes, im totally cheating here... I built these cards and app in SvelteKit and thought I'd be able to export it into a plain JS file to put in Codepen... however it seems it's not possible, and Codepen can't handle Svelte (yet?), so I deployed to Netlify and linked with an iFrame. 
		-->
		
		<iframe src="https://poke-holo.simey.me/" frameborder="0"></iframe>
		<script async src="https://www.googletagmanager.com/gtag/js?id=G-3SKXCY5997"></script>
		<script src="pokemonCardV2.js"></script>
	</body>
</html>